{% extends "base.html" %}
{% load static %}

{% block title %}GodJin · 用户反馈{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="{% static 'css/feedback.css' %}">
{% endblock %}

{% block content %}

<!-- Hero -->
<section class="hero text-white text-center"
         style="background: url('{% static "picture/introdu.jpg" %}') center/cover no-repeat;">
  <div class="container py-5">
    <h1 class="display-5 fw-bold mb-2">用户反馈</h1>
    <p class="lead mb-0">你的意见，是 GodJin 变好的最快路径</p>
  </div>
</section>

<section class="section">
  <div class="container">
    <div class="card border-0 shadow-sm">
      <div class="card-body p-4 p-md-5">

        <!-- 提示 -->
        <div id="fbAlert" class="alert d-none" role="alert"></div>

        <!-- 反馈表单 -->
        <form id="fbForm" class="row g-3"
              action="/api/feedback/" method="post" enctype="multipart/form-data"
              data-api="/api/feedback/">
          {% csrf_token %}

          <!-- 类型 -->
          <div class="col-12 col-md-4">
            <label class="form-label">反馈类型 <span class="text-danger">*</span></label>
            <select name="type" class="form-select" required>
              <option value="bug">功能/BUG</option>
              <option value="ux">体验/视觉</option>
              <option value="data">数据问题</option>
              <option value="suggest">功能建议</option>
              <option value="other">其他</option>
            </select>
          </div>

          <!-- 关联模块 -->
          <div class="col-12 col-md-4">
            <label class="form-label">关联模块</label>
            <select name="module" class="form-select">
              <option value="">未选择</option>
              <option value="cs2">数据分析 · CS2 饰品</option>
              <option value="douyin">自媒体 · 抖音</option>
              <option value="site">站点/首页</option>
            </select>
          </div>

          <!-- 紧急程度 -->
          <div class="col-12 col-md-4">
            <label class="form-label">紧急程度</label>
            <select name="priority" class="form-select">
              <option value="low">低</option>
              <option value="medium" selected>中</option>
              <option value="high">高</option>
            </select>
          </div>

          <!-- 标题 -->
          <div class="col-12">
            <label class="form-label">标题 <span class="text-danger">*</span></label>
            <input type="text" name="title" class="form-control" maxlength="60" required
                   placeholder="一句话描述你的问题或建议（≤ 60 字）">
            <div class="form-text"><span id="titleCount">0</span>/60</div>
          </div>

          <!-- 描述 -->
          <div class="col-12">
            <label class="form-label">详细描述 <span class="text-danger">*</span></label>
            <textarea name="detail" class="form-control" rows="6" maxlength="1000" required
                      placeholder="复现步骤 / 期望结果 / 实际结果 / 影响范围（支持粘贴文本）"></textarea>
            <div class="form-text"><span id="detailCount">0</span>/1000</div>
          </div>

          <!-- 截图上传 -->
          <div class="col-12">
            <label class="form-label">截图 / 文件（最多 5 个，单个 ≤ 5MB）</label>
            <input type="file" name="files" id="fbFiles" class="form-control" multiple
                   accept=".png,.jpg,.jpeg,.webp,.gif,.mp4,.mov,.pdf">
            <div class="small text-muted mt-1">推荐提供能体现问题的关键截图或短视频。</div>
            <div id="fbPreview" class="preview-grid mt-3"></div>
          </div>

          <!-- 联系方式（可选） -->
          <div class="col-12 col-md-6">
            <label class="form-label">联系邮箱（可选）</label>
            <input type="email" name="email" class="form-control" placeholder="用于回访与跟进进度">
          </div>
          <div class="col-12 col-md-6">
            <label class="form-label">QQ / 微信（可选）</label>
            <input type="text" name="im" class="form-control" placeholder="如需紧急沟通可填写">
          </div>

          <!-- 同意条款 -->
          <div class="col-12">
            <div class="form-check">
              <input class="form-check-input" type="checkbox" id="agree" required>
              <label class="form-check-label" for="agree">
                我同意将上述信息用于问题定位与体验优化。
              </label>
            </div>
          </div>

          <!-- 反爬/反垃圾：蜜罐 -->
          <div class="d-none">
            <label>请不要填写此字段</label>
            <input type="text" name="homepage">
          </div>

          <!-- 操作 -->
          <div class="col-12 d-flex gap-2">
            <button type="submit" class="btn btn-primary btn-lg shadow-sm">提交反馈</button>
            <button type="reset" class="btn btn-outline-secondary btn-lg">清空</button>
            <a href="/" class="btn btn-outline-dark btn-lg">返回首页</a>
          </div>
        </form>

      </div>
    </div>
  </div>
</section>

{% endblock %}

{% block extra_js %}
<script>
  // 外部 JS 需要 CSRF（Django），也可改用 Cookie 读取
  window.FB_CONFIG = {
    api: "/api/feedback/",
    csrf: "{{ csrf_token }}",
    maxFiles: 5,
    maxSizeMB: 5
  };
</script>
<script src="{% static 'js/feedback.js' %}"></script>
{% endblock %}